<template>
  <v-dialog
    v-model="visible"
    width="250"
  >
    <v-card :title="title">
      <v-card-text class="flex-cc">
        {{ content }}
      </v-card-text>
      <v-card-actions class="flex-bc">
        <v-btn color="primary" @click="visible=false">关闭</v-btn>
        <v-btn color="primary" @click="confirmBtn">确认</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script lang="ts" setup>
import {useVModel} from '@/hooks/useVModel';

const props=withDefaults(defineProps<{
  modelValue:boolean;
  title?:string;
  content:string;
}>(),{
  title:'提示'
})
const emit=defineEmits<{
  (e: 'update:modelValue'): void;
  (e: 'confirm'):void;
}>()

const visible=useVModel(props,'modelValue',emit);

const confirmBtn=() =>{
  emit('confirm');
  visible.value=false;
}
</script>

<style scoped>

</style>